<template>
  <div class="wrap">
    <el-container>
      <!-- 侧栏 -->
      <div class="aside">
        <el-aside style="width:100%;min-height:600px;border-right:1px solid #ccc">
          <!-- 侧栏导航 -->
          <el-row>
            <el-col :span="24">
              <h5 class="logo"
                  style="height:60px;line-height:60px;width:100%">
              </h5>
              <el-menu :collapse="collapse"
                       default-active="1"
                       :default-openeds="['0']"
                       :unique-opened="true"
                       class="el-menu-vertical-demo"
                       @open="handleOpen"
                       @close="handleClose"
                       background-color="#e4e4e4"
                       text-color="#000"
                       active-text-color="#ffd04b"
                       :router="true">
                <!-- ↑使用router属性之后 会将 menu-item上的index属性当成路由跳转 -->
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>学员管理</span>
                  </template>

                  <el-menu-item index="student"
                                class="student">
                    <i class="el-icon-menu"></i>
                    学员项目管理
                  </el-menu-item>
                </el-submenu>
                <el-menu-item index="3">
                  <i class="el-icon-document"></i>
                  <span slot="title">考勤管理</span>
                </el-menu-item>
                <el-menu-item index="mine">
                  <i class="el-icon-setting"></i>
                  <span slot="title">我的中心</span>
                </el-menu-item>
                <el-menu-item index="mine">
                  <i class="el-icon-setting"></i>
                  <span slot="title">数据统计</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
      </div>
      <el-container>
        <!-- 顶部 -->
        <el-header>
          <!-- 栅格布局 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content icon">
                <!-- 注册一个点击事件 合并合并菜单栏 -->
                <i class="el-icon-tickets"
                   @click="collapse=!collapse"></i>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content center">千锋教育管理系统</div>
            </el-col>
            <el-col :span="8"
                    class="right">
              <div class="grid-content login">
                <span style="margin-right:5px">欢迎您</span>
                <a class="user"
                   href="javascript:;">{{$store.state.nickname}}</a>
                <a class="quit"
                   href="javascript:;"
                   style="margin-left:20px"
                   @click="quit">退出</a>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!-- 主体部分 -->
        <el-main>
          <!-- 子路由的视图 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import QFlogo from "@/assets/images/qf.jpg"
  import { verify } from "@/api"
  export default {
    data() {
      return {
        collapse: false,
        QFlogo
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      quit() {
        //清除localstorage里面的token 然后让页面跳转到登入
        localStorage.removeItem("token");
        localStorage.removeItem("nickname")
        this.$router.push("/login");
      }
    },
    mounted() {
      //调用验证登入状态的接口
      let _this = this;
      verify().then(res => {
        if (!res.data.state) {
          _this.$router.push("/login")
        }
      })
    }
  };
</script>
<style scoped>
  .el-header,
  .el-footer {
    background-color: #428bca;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .grid-content {
    cursor: pointer;
  }

  .el-aside {
    background-color: #428bca;
    color: #fff;
    text-align: center;
  }

  .el-main {
    background-color: #fff;
    color: #fff;
    height: 100%;
  }

  /* 栅格的样式 */
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .grid-content.center {
    width: 100%;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .el-col.right {
    padding-right: 0 !important;
    text-align: right;
  }
  .grid-content.login .user {
    color: #d6ecf0;
    font-weight: bold;
  }
  .grid-content.login .quit {
    color: red;
    width: 100%;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .grid-content.icon {
    text-align: left;
    font-size: 26px;
  }
  /*侧栏样式*/
  .el-menu {
    border: none;
  }
  .aside {
    max-width: 300px;
    background-color: #428bca;
  }
  .wrap,
  .el-container {
    height: 100%;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .logo {
    /* background-size: contain; */
    background-image: url("../../assets/images/logo.png");
    background-repeat: no-repeat;
  }
 
</style>